import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import styles from './index.less';
import moment from 'moment';
import { Input, Modal, Form, Button, message, Spin,Row, Col,Tabs,Radio,Select } from 'antd';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const Option = Select.Option;

export default class Index extends Component{

  state={
    deliveryType:1,
    deliveryManId:this.props.defaultDeliveryId
  }

  componentWillMount() {
    window.Isoption = false;

  }
  componentDidMount() {
    window.Isoption = true;
  }

	okHandle = () => {
    const {form,comfirm,selectedIdList,deliveryManList} = this.props;
    const {deliveryType,deliveryManId}=this.state;
    if(deliveryType===1){
      form.validateFields(['DeliveryMan1'],(err, values) =>{
        if(!values.DeliveryMan1) return;
        const deliveryMan=deliveryManList.filter((item)=>{return item.Id===deliveryManId});

        let params={
          DeliveryMan:deliveryMan[0].UserName,
          DeliveryTel:deliveryMan[0].UserPhone,
          OrderIdList:selectedIdList
        };
        if(typeof comfirm === 'function') comfirm(params);
      });

    }else{
      form.validateFields(['DeliveryMan','DeliveryTel'],(err, values) =>{
        if(!values.DeliveryMan||!values.DeliveryTel) return;
        let params={
          DeliveryMan:values.DeliveryMan,
          DeliveryTel:values.DeliveryTel,
          OrderIdList:selectedIdList
        };
        if(typeof comfirm === 'function') comfirm(params);
      });
    }
    //console.log(params)


  }


  handleModalVisible = () => {
    const { handleModalVisible } =this.props;
    if(typeof handleModalVisible === 'function') handleModalVisible();
  }


  tabChange = () => {

  }
  selectDeliveryMan = (e) => {
    //console.log(e)
    this.setState({deliveryManId:e})
  }
  onDeliveryTypeChange = (e) => {
    const {form} = this.props;
    //console.log(e)
    this.setState({deliveryType:e.target.value})
    if(e.target.value===1){
      form.resetFields(['DeliveryMan','DeliveryTel'])
    }else{
      form.resetFields(['DeliveryMan1'])
    }
  }

	render(){
    const {modalVisible,form:{getFieldDecorator},confirmLoading,deliveryManList,deliveryManLoad,defaultDeliveryId} = this.props;
    const {deliveryType} = this.state;
    let defaultDeliveryMan='';
    if(defaultDeliveryId){
      const deliveryMan=deliveryManList.filter((item)=>{return item.Id===defaultDeliveryId});
      defaultDeliveryMan=`${deliveryMan[0].UserName} ${deliveryMan[0].UserPhone}`
    }
    //console.log(defaultDeliveryMan)

		 return (
      <Modal
        destroyOnClose
        centered
        title="发货"
        visible={modalVisible}
        onOk={this.okHandle}
        confirmLoading={ confirmLoading }
        onCancel={this.handleModalVisible}
        width={520}
      >
          <Spin spinning={deliveryManLoad}>
            <Tabs defaultActiveKey="1" onChange={this.tabChange}>
              <TabPane tab="商家自配送" key="1">
              <RadioGroup onChange={this.onDeliveryTypeChange} value={deliveryType}>
                <Radio style={{ display: 'block', height: '39px', lineHeight: '39px',marginBottom:16 }} value={1}>
                  <span style={{marginRight:8}}>选择配送员</span>
                  <FormItem
                    labelCol={{ span: 9 }}
                    wrapperCol={{ span: 15 }}
                    label=""
                    style={{display:"inline-block"}}
                  >
                  {getFieldDecorator('DeliveryMan1',{
                    initialValue:defaultDeliveryMan,
                    rules: [{ required: true, message:'此项为必选项' }],
                  })(
                    <Select style={{ width: 200 }} placeholder="请选择配送员" onChange={this.selectDeliveryMan}>
                      {deliveryManList.map((item)=>{
                        return <Option key={item.Id} value={item.Id}>{`${item.UserName} ${item.UserPhone}`}</Option>
                      })}
                    </Select>
                  )}
                  </FormItem>
                </Radio>
                <Radio style={{ display: 'block', height: '30px', lineHeight: '30px' }} value={2}>使用新的配送员
                  {deliveryType===2?<Form>
                    <FormItem
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 16 }}
                      label="配送员姓名"
                      style={{marginLeft: 40}}
                    >
                      {getFieldDecorator('DeliveryMan',{
                        rules: [{ required: true, message:'此项为必选项' }],
                      })(
                        <Input style={{ width: '100%' }}/>
                      )}
                    </FormItem>
                    <FormItem
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    label="联系方式"
                    style={{marginLeft: 40}}
                  >
                    {getFieldDecorator('DeliveryTel',{
                      rules: [{ required: true, message:'此项为必选项' }],
                    })(
                      <Input style={{ width: '100%' }}/>
                    )}
                  </FormItem>
                  </Form>
                  :null}
                </Radio>
              </RadioGroup>
              </TabPane>
            </Tabs>
          </Spin>
      </Modal>
    );
	}
}
